<template>
    <userDialog
        v-model="visible"
        dialogTitle="添加成员"
        width="880px"
        @handleCloseDialog="close"
        @open="init"
    >
        <template v-slot:userDiagContent>
            <div class="dialog-info">
                <div class="dialog-info-left">
                    <div class="dialog-info-left-top">
                        <el-input
                            v-model="searchKey"
                            class="w-50"
                            placeholder="请输入搜索信息"
                            :prefix-icon="Search"
                        />
                        <el-button
                            type="primary"
                            @click="searchUser"
                            :loading="loading"
                            >搜索</el-button
                        >
                    </div>
                    <div class="dialog-info-left-bottom">
                        <el-table
                            ref="multipleTableRef"
                            :data="showData"
                            style="width: 100%; height: 306px"
                            @row-click="handleRowClick"
                        >
                            <el-table-column prop="username" label="用户名称" />
                            <el-table-column prop="realname" label="真实姓名" />
                            <el-table-column prop="phone" label="手机号" />
                            <el-table-column
                                prop="type_name"
                                label="用户角色"
                            />
                        </el-table>
                    </div>
                </div>

                <div class="dialog-info-right">
                    <div class="dialog-info-right_title">
                        <span>已选{{ choosedList.length }}个成员</span>
                        <span
                            class="dialog-info-right_title_close"
                            @click="allEmpty"
                            >清空</span
                        >
                    </div>
                    <div class="dialog-info-right_list">
                        <p
                            v-for="item in choosedList"
                            @click="deleteItem(item)"
                        >
                            <span>{{ item.realname }} {{ item.phone }}</span>
                            <SvgIcon
                                icon-class="dialog_delect"
                                class="delect"
                            ></SvgIcon>
                        </p>
                    </div>
                </div>
            </div>

            <div class="confirmBtn">
                <el-button type="primary" @click="upData()"> 提交 </el-button>
                <el-button type="info" @click="init()"> 重置 </el-button>
            </div>
        </template>
    </userDialog>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import UnitsAPI from "@/api/system/units";
const visible = defineModel("modelValue", {
    type: Boolean,
    required: true,
    default: false,
});

const emit = defineEmits(["reFresh"]);

const props = defineProps({
    editUnitsUserRes: {
        required: false,
        default: () => [] as any,
    },
    editUnitsUserChoosed: {
        required: false,
        default: () => [] as any,
    },
    companyId: {
        required: false,
        default: () => "",
    },
});

const choosedList: any = ref([]);

const searchKey = ref("");
const loading = ref(false);

watch(
    () => searchKey.value,
    (newVal: string) => {
        if (newVal === "") {
            searchDataData.value = [];
        }
    },
    {
        deep: true,
    }
);
const searchDataData: any = ref([]);
// 搜索成员
async function searchUser() {
    if (searchKey.value === "") {
        ElMessage.error("请输入搜索条件");
        return;
    }
    let params = {
        company_id: props.companyId,
        user_name: searchKey.value,
    };
    loading.value = true;
    await UnitsAPI.getUnitsUserList(params)
        .then((res: any) => {
            if (res?.length < 1) {
                ElMessage.success("暂未查询到该成员信息");
            }
            searchDataData.value = res;
        })
        .catch((err: any) => {
            console.log(err);
        })
        .finally(() => {
            loading.value = false;
        });
}

const showData = computed(() => {
    if (searchDataData.value.length) {
        return searchDataData.value;
    }
    return props.editUnitsUserRes;
});

function allEmpty() {
    choosedList.value = [];
}

function deleteItem(ele: any) {
    choosedList.value = choosedList.value.filter((item: any) => {
        return !(
            item.realname === ele.realname &&
            item.username === ele.username &&
            item.phone === ele.phone &&
            item.type_name === ele.type_name
        );
    });
}

// 行点击事件
function handleRowClick(row: any) {
    let flag = choosedList.value.find((item: any) => {
        return (
            item.realname === row.realname &&
            item.username === row.username &&
            item.phone === row.phone &&
            item.type_name === row.type_name
        );
    });
    if (!flag) {
        choosedList.value.push(row);
    } else {
        ElMessage.error("该成员已选");
    }
}

// 提交
async function close() {
    visible.value = false;
}
// 提交
async function upData() {
    let arr = choosedList.value.map((item: any) => {
        return item.id;
    });
    let params: any = {
        uids: arr,
        company_id: props.companyId,
    };
    await UnitsAPI.addUnitsUserUser(params)
        .then((data: any) => {
            visible.value = false;
            emit("reFresh");
            ElMessage.success(`添加成员成功`);
        })
        .catch((err: any) => {
            console.log(err);
        });
}

function init() {
    searchKey.value = "";
    choosedList.value = props.editUnitsUserChoosed;
}
</script>

<style lang="scss" scoped>
.dialog-info {
    width: 100%;
    padding: 30px 40px;
    display: flex;
    flex-direction: row;
    &-left {
        width: 558px;
        height: 361px;
        display: flex;
        flex-direction: column;
        &-top {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            .el-input {
                height: 44px;
                :deep(.el-input__wrapper) {
                    border-right: 0px;
                }
            }
            .el-button {
                height: 44px;
                width: 110px;
                border: 2px;
            }
        }
        &-bottom {
            flex: 1;
            margin-top: 10px;
            cursor: pointer;
            border: 1px solid #e5e5e5;
        }
    }
    &-right {
        display: flex;
        flex: 1;
        flex-direction: column;
        height: 361px;
        margin-left: 20px;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        &_title {
            font-size: 14px;
            padding: 11px 14px;
            line-height: 20px;
            color: #222222;
            display: flex;
            justify-content: space-between;

            border-bottom: 1px solid #e5e5e5;
            border-radius: 6px;
            &_close {
                color: #185dfe;
                cursor: pointer;
            }
        }
        &_list {
            flex: 1;
            overflow-y: auto;
            padding: 21px 14px;
            p {
                position: relative;
                font-size: 14px;
                width: 100%;
                line-height: 20px;
                border-radius: 4px;
                padding: 5px 16px;
                background: #f9f9ff;
                margin-top: 8px;

                @include textChangeRow;
                span {
                    vertical-align: middle;
                }
                .delect {
                    cursor: pointer;
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    right: 4px;
                    top: 50%;
                    transform: translate(0, -50%);
                }
            }
            :first-child {
                margin-top: 0px;
            }
        }
    }
}
.confirmBtn {
    @include flexLayout;

    .el-button {
        padding: 10px 42px;
    }
}
</style>
